<template>
  <div class="component-page" :style="theme">
    <slot name="other" />
    <view class="body">
      <view class="nav-bar">
        <view v-if="isNavBar"
              class="nav-bar-header"
              :class="bgClass ? bgClass : 'bg'"
              :border="isBorderShow"
              :leftWidth="leftWidth"
              :rightWidth="rightWidth"
              :style="{ paddingTop: `${statusHeight}px` }">
          <view>
            <uni-icons v-if="isBackArrow"
                       type="arrowleft"
                       color="#666"
                       size="18"
                       @click="returnAgainPage" />
            <slot v-else name="headerLeft" />
          </view>
          <view v-if="title" class="view-title">
            <view>{{ title }}</view>
          </view>
          <view v-else>
            <slot name="center" />
          </view>
          <view>
            <slot name="headerRight" />
          </view>
        </view>
      </view>
      <view class="container"
            :class="{'show-navbar': isNavBar}"
            :style="isNavBar ? `padding-top: calc(${statusHeight}px + 88rpx);` : ''">
        <view class="container-body">
          <slot />
        </view>
      </view>
      <view v-if="isShowFooter" class="footer-btn">
        <slot name="footer"></slot>
      </view>
    </view>
  </div>
</template>

<script lang="ts">

export default {
  name: 'UPage'
}
</script>

<script lang="ts" setup>
import { StyleValue, computed, defineProps, ref } from 'vue'
import { useSystemStore } from '@/store/system'
import { getStorage } from '@/utils/common'
import { onShow } from '@dcloudio/uni-app'
const systemStore = useSystemStore()
// 防止 style 报格式错误
const theme = computed(() => systemStore.theme as StyleValue)
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 是否需要状态栏
  isNavBar: {
    type: Boolean,
    default: true
  },
  // 是否显示返回按钮
  isBackArrow: {
    type: Boolean,
    default: true
  },
  // 导航栏下是否有边框
  isBorderShow: {
    type: Boolean,
    default: true
  },
  // 是否展示footer
  isShowFooter: {
    type: Boolean,
    default: false
  },
  // 自定义背景class
  bgClass: {
    type: String,
    default: ''
  },
  // 左侧插槽宽度
  leftWidth: {
    type: String,
    default: '120rpx'
  },
  rightWidth: {
    type: String,
    default: '120rpx'
  }
})
const returnAgainPage = () => {
  uni.navigateBack({
    delta: 1
  })
}
const statusHeight = ref()
onShow(() => {
  const currentIndex = getStorage('themeIndex') ? getStorage('themeIndex') : 0
  uni.setNavigationBarColor({
    frontColor: currentIndex === 0 ? '#000000' : '#ffffff',
    backgroundColor: currentIndex === 0 ? '#F6F7FB' : '#000000'
  })
  statusHeight.value = uni.getSystemInfoSync().statusBarHeight
})

</script>

<style lang="scss" scoped>
.component-page {
  min-height: calc(100vh - 1rpx);
  background: var(--bg-color);

  .body {
    position: relative;
  }

  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }

  .top-height {
    background-color: var(--bg-color);
  }

  .nav-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22rpx;
    height: 88rpx;
    .uni-icons.uniui-arrowleft {
      color: var(--text-color-1) !important;
    }

    .view-title {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      color: var(--text-color-1) !important;
      font-weight: bold;
      font-size: 17px;
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: row;
      flex: 1;
      font-weight: 600;
    }
  }

  .opacity-background {
    background-color: rgba(255, 255, 255, 0);
  }

  .mask-class {
    position: fixed;
    bottom: 0;
    top: 0;
    z-index: 999;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0);
  }

  .page-loading {
    position: fixed;
    z-index: 999;
    width: 240rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(48, 49, 51, 0.88);
    text-align: center;
    border-radius: 16rpx;
    color: var(--bg-light-color);

    &-icon {
      margin: 46rpx 78rpx 0 78rpx;
      width: 84rpx;
      height: 84rpx;
      vertical-align: baseline;
      background-repeat: no-repeat;
      animation: uni-loading 1s steps(30, end) infinite;
      background-size: 100%;
    }

    &-content {
      color: #fff;
      margin: 28rpx 0 34rpx;
      // color: var(--text-color-1);
    }
  }

  .footer-btn {
    position: fixed;
    bottom: 0;
    padding-bottom: calc(env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    z-index: 90;
    box-sizing: border-box;
    background: var(--bg-light-color);
    border-top: solid 1rpx var(--line-color);
  }
}
</style>
